<style scoped>
   .flex{
     align-items: baseline;
   }
   .flex1{
     flex: 1;
     text-align: center;
   }
   .center{
     width: 70px;
     height: 40PX;
   }
   .bgfff{
     background: #FFF;
     padding: 5px 0;
   }
   .fp{
     BACKGROUND: #EEE;
     MARGIN: 5PX;
   }
</style>
<template>
  <view>
   <!-- 头部区域 --> 
   <view class="user-info flex">
      <view class="tip"> 你今天走的每一步 都会算数 </view>
      <view class="user" @click="toPage('/pages/user/index')">
        <view class="user-img"> </view>
        <view class="user-name"> 测试</view>
        <view class="user-no"> 09111</view>
      </view>
    </view> 
    <view class="flex yellow-line"> 
         <view class="center"> 小区</view>
         <view class="flex1 padding1"> 
           <input class="search" @click="toPage('/pages/map/index')" v-model="tmp.tab" placeholder="请输入小区或者物业地址位置" />
         </view>
    </view>
    <view class="flex bgfff"> 
         <view class="center fp"> 放盘</view>
         <view class="flex1"> 
            <view :class="saleType==1?'col2 col3':'col2'" @click="saleType=1"> 出售 </view>
         </view>
          <view class="flex1"> 
            <view :class="saleType==0?'col2 col3':'col2'" @click="saleType=0"> 出租 </view>
         </view>
    </view>

 
     
    <view class="bar"> </view>

  <van-tree-select height="55vh" :items="items" :main-active-index.sync="active" @click-nav="clicknav">
  <template #content>
    <view v-show="active === 0">   <types/> </view>
    <view v-show="active === 1">   <hose/> </view>
    <view v-show="active === 2">   <Area/> </view>
    <view v-show="active === 3">   <feature/> </view>
    <view v-show="active === 4">   <price/> </view>
    <view v-show="active === 5">   <picture/> </view>
    <view v-show="active === 6">   <desc/> </view>
    <view v-show="active === 7">   <status/> </view> 
  </template> 
</van-tree-select>
  <!-- 按钮 --> 
  <view class="eee-bg ">
      <van-button class="publish-btn btn" color="#FBD100" type="primary" @click="push()" >保存</van-button>
      <van-button class="publish-btn btn" color="#FBD100" type="primary" @click="push()">提交</van-button>
  </view>

 </view>
</template>

<script> 
import Area from './commpent/area.vue'
import desc from './commpent/desc.vue'
import feature from './commpent/feature.vue'
import hose from './commpent/hose.vue'
import picture from './commpent/picture.vue'
import price from './commpent/price.vue'
import status from './commpent/status.vue'  
import types from './commpent/type.vue' 


export default {
  components:{
    Area,desc,feature,hose,picture,price,status,types
  },
  data() {
    return {
      title: 'Hello',
      user:{},
      tmp:{},
      saleType: 0,
      active: 0,
      items: [
        { text: '类型' }
      , { text: '门牌' }
      , { text: '面积' }
      , { text: '特色' }
      , { text: '价格' }
      , { text: '照片' }
      , { text: '描述' }
      , { text: '状态' }
      ],
      apiUserInfo:{},
      fileList: [
        {
          url: 'https://img01.yzcdn.cn/vant/leaf.jpg',
          status: 'uploading',
          message: '上传中...',
        },
      ],
    }
  },
  onLoad() {},
   created() {
    console.log("INDEX",this.$store.state.apiUserInfo);
    this.apiUserInfo = this.$store.state.apiUserInfo;
    // this.login()
  },
  methods: {
    afterRead (e) {
       console.log(e);
    },
    clicknav(i){ 
      this.active= i.detail.index;
    },
    confirm (date) {
      // this.ztPrice.settledTime = data
      this.show = false
      this.$bus.emit('showTimeBack',date)
      },
    changeTab({ title, paneKey, disabled }) {
      console.log(title, paneKey, disabled);
      this.tmp.tab = paneKey;
    },
    load() {
      var th = this;
      th.ajax.get(getCurrentInstance().router.params.id? "/property/getInfoByAuth/" + options.id: th.ajax.api.loadTemp).then((res) => {
          th.handelViewData(res);
      });
    },
    handelViewData(res) {
      console.log("查询成功", res);
      var th = this;
      var tmp = {};
      tmp.ztApproval = res.data.ztApproval || {};
      tmp.ztFeature = res.data.ztFeature || {};
      tmp.ztLocation = res.data.ztLocation || {};
      tmp.ztPicture = res.data.ztPicture || {};
      tmp.ztPrice = res.data.ztPrice || {};
      tmp.ztSpace = res.data.ztSpace || {};

      th.saleTyp = res.data.saleTyp;
      th.propertyName = res.data.propertyName;
      this.$store.dispatch("asyncPublishInfo", tmp);
    },
    put() {},
    push() { 
      var th = this;
      var { tmp,publishInfo,ztLocation,ztSpace,ztPrice} = this.$store.state

      console.log({
        tmp,publishInfo,ztLocation,ztSpace,ztPrice
      });   

      th.ajax.post(getCurrentInstance().router.params.id?  this.ajax.api.property : this.ajax.api.addTemp,this.handelData).then((res) => {
          console.log("物业接口返回",res);

      });

    },
    handelData() {
      var data = this.$store.state;
      data.cooperationAmount = parseFloat(data.cooperationAmount);
      data.cooperationProportion = parseFloat(data.cooperationProportion);
      data.cooperationType = parseFloat(data.cooperationType);
      data.propertyStatus = parseFloat(data.propertyStatus);
      data.propertyPermission = data.propertyPermission == "false" ? 0 : 1;
      data.ztLocation.building = parseFloat(data.ztLocation.building);
      data.ztLocation.certificateType = parseFloat( data.ztLocation.certificateType);
      data.ztLocation.storey = parseFloat(data.ztLocation.storey);
      data.ztLocation.totalStorey = parseFloat(data.ztLocation.totalStorey);
      data.ztSpace.balcony = parseFloat(data.ztSpace.balcony);
      data.ztSpace.basement = parseFloat(data.ztSpace.basement);
      data.ztSpace.carport = parseFloat(data.ztSpace.carport);
      data.ztSpace.coveredArea = parseFloat(data.ztSpace.coveredArea);
      data.ztSpace.gardenArea = parseFloat(data.ztSpace.gardenArea);
      data.ztSpace.householdStorey = parseFloat(data.ztSpace.householdStorey);
      data.ztSpace.insideArea = parseFloat(data.ztSpace.insideArea);
      data.ztSpace.interlayer = parseFloat(data.ztSpace.interlayer);
      data.ztSpace.interlayerHeight = parseFloat(data.ztSpace.interlayerHeight);
      data.ztSpace.lift = parseFloat(data.ztSpace.lift);
      data.ztSpace.parlor = parseFloat(data.ztSpace.parlor);
      data.ztSpace.room = parseFloat(data.ztSpace.room);
      data.ztSpace.totalFloor = parseFloat(data.ztSpace.totalFloor);

      return data;
    },
  },
}
</script>

<style   scoped>
   
.publish {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-size: 18px;
}
.main-tab {
  flex: 1;
  overflow: hidden;
}
 
.user-info {
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 10px;
  border-bottom: 8px solid #ccc;
  margin-bottom: 5px;
}
.tip {
  font-size: 14px;
  font-weight: 600;
}
.user {
  padding: 10px;
}
.user-img {
  width: 50px;
  height: 50px;
  background: url(https://unsplash.it/600/300?random) center center / 100% 100%;
  border-radius: 50%;
}
.user-name {
  font-size: 14px;
  font-weight: 600;
}
.user-no {
  font-size: 14px;
  color: #ccc;
}
.search1 {
  background: #fbd100;
  padding: 4px 20px;
  align-items: center;
}
.search{
  border: 1px solid #ccc;
  background: #fff;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  padding: 5px;
  flex: 1;
}
.padding1{
  padding: 0 10px;
}
.tool2 {
  padding: 0px;
  text-align: center;
  margin-top: 10px;
}
.col1 {
  background: #eee;
   
  text-align: center;
  padding: 10px 20px;
}
.col2 {
  background: #eee;
  margin: 0 10px;
  padding: 10px 20px;
  border-radius: 0 0 10px 0;
  flex: 1;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 85% 100%, 0% 100%);
}
.col3 {
  background: yellow;
}
.bar {
  background: #eee;
  height: 6px;
  margin: 4px 0;
}
.center{
  text-align: center;
}
.yellow-line{
  background:#fbd100 ;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.eee-line{
  background:#eee;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.line2{
  margin-top: 4px; 
}
.van-searchbar{
  background: #fbd100;
  padding: 4px 8px;
}
.eee-bg{
  background: #eee;
  padding:20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
